{% extends "base.html" %}

{% block title %}User Settings - BunnySpell{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='user_settings.css') }}">
{% endblock %}

{% block content %}
<div class="settings-container">
    <h1 class="settings-title">User Settings</h1>
    
    <form class="settings-form" method="POST" action="{{ url_for('user_settings') }}">
        <div class="form-group">
            <label for="current_password">Current Password</label>
            <input type="password" id="current_password" name="current_password" required>
        </div>
        
        <div class="form-group">
            <label for="new_password">New Password</label>
            <input type="password" id="new_password" name="new_password" required>
        </div>
        
        <div class="form-group">
            <label for="confirm_password">Confirm New Password</label>
            <input type="password" id="confirm_password" name="confirm_password" required>
        </div>

        <button type="submit" class="submit-button">Update Password</button>
    </form>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="{{ category }}-message">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
</div>
{% endblock %}
